import Taro from '@tarojs/taro';
import lottie from 'lottie-miniapp';
// import lottie from 'lottie-miniprogram';
import * as AnimationData from '../assets/lottie/loading.json';

export function initLottie(canvasId) {

  Taro.createSelectorQuery().select(`#${canvasId}`).node(res => {
    console.log('id', `#${canvasId}`)
    console.log('res', res)
    const canvas = res.node
    const context = canvas.getContext('2d')
    console.log('context', context)
    console.log('canvas', canvas)
    const dpr = Taro.getSystemInfoSync().pixelRatio
    canvas.width = res.node.width * dpr
    canvas.height = res.node.height * dpr
    // canvas.width = 40//设置宽高，也可以放到wxml中的canvas标签的style中
    // canvas.hight = 40
    lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象

    lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂
      loop: true,//是否循环播放（选填）
      autoplay: true,//是否自动播放（选填）
      animationData: {},
      poth: 'http://qiniupublic.fortunemy.top/empty.json',
      // path:'https://cdn.你的域名.com/aaa.json',//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
      rendererSettings: {
        context//es6语法：等同于context:context（必填）,
      }
    })
  }).exec()


  // console.log('this', this)
  // const canvasContext = Taro.createCanvasContext(canvasId,this);
  // //  请求到的lottie json数据
  // const animationData = {};
  // // 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
  // const animationPath = 'http://qamjze7eb.bkt.clouddn.com/lottie.json';

  // // 指定canvas大小
  // canvasContext.canvas = {
  //   width: 40,
  //   height: 40
  // };
  // // 如果同时指定 animationData 和 path， 优先取 animationData
  // lottie.loadAnimation({
  //   renderer: 'canvas', // 只支持canvas
  //   loop: true,
  //   autoplay: true,
  //   animationData: AnimationData,
  //   path: '',
  //   rendererSettings: {
  //     context: canvasContext,
  //     // clearCanvas: true
  //   }
  // });
}
